<template>
    <div class="business-metrics">

      <!-- Main Content -->
      <div class="main-content">
        <div class="content-header">
          <h2>经营指标</h2>
          <el-button type="primary" @click="handleCreateMetric">新建指标</el-button>
        </div>
  
        <div class="metrics-grid">
          <el-card 
            v-for="metric in metrics" 
            :key="metric.id" 
            class="metric-card"
            shadow="hover"
            @click="handleMetricClick(metric)"
          >
            <div class="metric-content">
              <div class="metric-info">
                <div class="metric-title">{{ metric.title }}</div>
                <div class="metric-subtitle">{{ metric.subtitle }}</div>
              </div>
              <i class="el-icon-arrow-right"></i>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'BusinessMetrics',
    data() {
      return {
        metrics: [
          {
            id: 1,
            title: '回款金额',
            subtitle: 'CRM回款金额为员工当期绩效目标'
          },
          {
            id: 2,
            title: '合同金额',
            subtitle: 'CRM合同金额为员工当期绩效目标'
          },
          {
            id: 3,
            title: '签约合同数',
            subtitle: 'CRM签约合同数为员工当期绩效目标'
          },
          {
            id: 4,
            title: '新增客户数',
            subtitle: 'CRM新增客户数为员工当期绩效目标'
          },
          {
            id: 5,
            title: '客户跟进次数',
            subtitle: 'CRM客户跟进次数为员工当期绩效目标'
          },
          {
            id: 6,
            title: '原进客户数',
            subtitle: 'CRM原进客户数为员工当期绩效目标'
          },
          {
            id: 7,
            title: '新增呼叫数',
            subtitle: 'CRM新增呼叫数为员工当期绩效目标'
          },
          {
            id: 8,
            title: '新增线索数',
            subtitle: 'CRM新增线索数为员工当期绩效目标'
          }
        ]
      }
    },
    methods: {
      handleCreateMetric() {
        this.$message.success('点击了新建指标')
      },
      handleMetricClick(metric) {
        console.log('Clicked metric:', metric)
      }
    }
  }
  </script>
  
  <style scoped>
  .business-metrics {
    display: flex;
    min-height: 100vh;
    background-color: #f5f7fa;
  }
  
  .sidebar {
    width: 200px;
    background-color: white;
    border-right: 1px solid #e6e6e6;
  }
  
  .sidebar-menu {
    border-right: none;
  }
  
  :deep(.el-menu-item) {
    display: flex;
    align-items: center;
    height: 50px;
    line-height: 50px;
  }
  
  :deep(.el-menu-item.is-active) {
    background-color: #e6f7ff;
    color: #1890ff;
    border-right: 2px solid #1890ff;
  }
  
  :deep(.el-menu-item i:first-child) {
    margin-right: 10px;
  }
  
  .main-content {
    flex: 1;
    padding: 24px;
  }
  
  .content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
  }
  
  .content-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
  }
  
  .metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  
  .metric-card {
    cursor: pointer;
    transition: all 0.3s;
  }
  
  .metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  .metric-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
  }
  
  .metric-info {
    flex: 1;
  }
  
  .metric-title {
    font-size: 16px;
    font-weight: 500;
    color: #1f2329;
    margin-bottom: 8px;
  }
  
  .metric-subtitle {
    font-size: 12px;
    color: #86909c;
    line-height: 1.5;
  }
  
  .el-icon-arrow-right {
    color: #c9cdd4;
    font-size: 16px;
    margin-left: 16px;
  }
  
  :deep(.el-card__body) {
    padding: 16px 20px;
  }
  </style>